import React, {memo, useEffect,useState} from 'react';
import {shallowEqual, useDispatch, useSelector} from 'react-redux'
import { getArticleMessageAction } from '../../store/articleStore/actionCreators';
import { Table, Tag, Space, Divider, Card, Button, Modal, message,Spin } from 'antd';
import { deleteArticleRequest } from '../../services/Admin';
import { Redirect } from 'react-router';
import { NavLink } from 'react-router-dom';


export default memo(function ArticleManage() {
    const {articleMessage} = useSelector(state => ({
        articleMessage: state.getIn(["articles","articleMessage"])
    }), shallowEqual)

    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(getArticleMessageAction());
        // console.log(articleMessage);
    }, [dispatch, articleMessage])


    //相关自定义状态
    const [isVisable, setIsVisable] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [currentDeleteArticle, setCurrentDeleteArticle] = useState({});
    const [isReload, setIsReload ] = useState(false);

    //重新刷新页面
    useEffect(() => {

    }, [isReload]);

    //删除文章的回调
    const deleteArticle = (text, record) => {
      console.log('deleteArticle');
      setCurrentDeleteArticle(text);
      setIsVisable(true);
    }

    //弹窗确认
    const onOk = () => {
      console.log('ok');
      setIsLoading(true);
      deleteArticleRequest(currentDeleteArticle.aid).then(res => {
        setIsLoading(false);
        setIsVisable(false);

        if(res.code === 200)
        {
          message.success("文章删除成功!");
          setIsReload(true);
        }
        else
        {
          message.error("文章删除失败！");
        }
      }).catch(err => {
        setIsLoading(false);
        setIsVisable(false);
        message.error("文章删除失败!")

      })
    }


    //弹窗取消
    const onCancel = () => {
      console.log('cancel');
      setIsVisable(false);
    }





    const columns = [
        {
          title: '文章ID',
          dataIndex: 'aid',
          key: 'aid',
          render: text => <a href={'##'}>{text}</a>
            ,
        },
        {
            title: '文章标题',
            dataIndex: 'article_title',
            key: 'article_title',
        },
        {
            title: '文章作者',
            dataIndex: 'article_author_id',
            key: 'article_author_id',
            render: author => {
              return (
                <>
                  {author.username}
                </>
              )
            }
          },
        {
          title: '发布时间',
          dataIndex: 'article_pubtime',
          key: 'article_pubtime',
        },
        {
            title: '文章点赞数量',
            dataIndex: 'article_up_count',
            key: 'article_up_count',
            render: count => {
                let color = 'blue';
                if(count>1000)
                {
                    color = 'red';
                }
                return (
                    <>
                        <Tag color={color} key={count}>
                        {count}
                    </Tag>
                    </>
                )
            }
        },
        {
          title: "文章主题",
          dataIndex: "article_theme_id",
          key: "article_theme_id",
          render: theme => {

            return (
              <>
                {theme.a_theme_name}
              </>
            )
          }
        },
        {
          title: '操作',
          key: 'action',
          render: (text, record) => (
            <Space size="middle">
              <Button type="link"><NavLink to={`/admin/article_detail/:${text.aid}`} exact>审阅</NavLink></Button>
              <Button type="link" onClick={e=> deleteArticle(text, record)}>删除</Button>
            </Space>
          ),
        },
      ];


    return (
        <div>
            {/* <Divider orientation="left">文章管理页</Divider>
            <div>
                <Table 
                    columns={columns} 
                    dataSource={articleMessage} 
                    style={{minHeigh:"100%"}}
                    rowKey={record => record.id}
                />
            </div> */}
            <Card
              title="文章管理页"
              bordered={false}
              style={{padding: '0 0 0',
                width: '100%',
                height: 800}}
              >
                <Table 
                  dataSource={articleMessage}
                  columns={columns}
                  style={{minHeight:'50%'}}
                  
                />
            </Card>
            <Modal
              title="提示框"
              visible={isVisable}
              onOk={onOk}
              onCancel={onCancel}
              cancelText="取消"
              okText="确定"
            >
              <p>是否确认删除该文章？</p>
              <Spin spinning={isLoading}/>
            </Modal>
        </div>
    )
})